<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>使用精灵图拼写名字</title>
    <style>
      span {
        display: inline-block;
        background: url(image/abcd.jpg) no-repeat;
      }

      .z {
        width: 116px;
        height: 110px;
        background-position: -478px -557px;
      }

      .h {
        width: 104px;
        height: 106px;
        background-position: -218px -141px;
      }

      .a {
        width: 110px;
        height: 112px;
        background-position: 0 -9px;
      }

      .n {
        width: 112px;
        height: 113px;
        background-position: -256px -275px;
      }

      .g {
        width: 106px;
        height: 110px;
        background-position: -96px -141px;
      }
    </style>
  </head>
  <body>
    <span class="z">z</span>
    <span class="h">h</span>
    <span class="a">a</span>
    <span class="n">n</span>
    <span class="g">g</span>
  </body>
</html>
